$highlight-color: #f90;
$basic-border: 1px solid #000;
$nav-color: #F90;

// 1. 变量的声明
#app {
  background-color: $highlight-color;
  border: $basic-border;
}

// 2. 变量的作用域
nav {
  // $width是在nav中定义的, 所以只能在nav这个作用域使用, 外面不能使用.
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}

// 3. 嵌套语法
#content {
  color: red;
  article {
    h1 { color: #1dc08a }
    p {  
      font-style: italic; 
      a {
        color: blue;
        // 4. 父选择器
        &:hover {
          color: pink;
        }
      }
    }
  }
  aside { background-color: #f90 }
}